﻿<html>
<head>
<title>Four Leaf</title>
<style>

body {
background-color:gray;
}

hr {
border-width:6px;
margin:1px;
width:400px;
}

h1 {
color:#44EE44;
margin:1px;
font-family:sans-serif;
}

table {
border:groove 5px green;
border-radius:10px;
}

th {
width:100px;
text-align:center;
border:groove 3px orange;
border-radius:10px;
color:white;
}

td {
color:#DDDDDD;
text-align:center;
border:groove 3px lightgreen;
border-radius:10px;
height:40px;
font-size:20pt;
font-weight:bold;
}

td.player {
color:white;
}

td.pool {
color:red;
}

</style>
</head>

<body>
<center>
<hr>
<h1>Four Leaf</h1>
<hr><br>
<table id='store'>
<tr>
<th>Player</th><th>Pool</th>
<th>Pocket 1</th><th>Pocket 2</th>
<th>Dice 1</th><th>Dice 2</th><th>Dice 3</th><th>Dice 4</th>
</tr>
<tr>
<td class='player'></td><td class='pool' onclick='getPool(1);'></td>
<td></td><td></td><td></td>
<td></td><td></td><td></td>
</tr>
<tr>
<td class='player'></td><td class='pool' onclick='getPool(2);'></td>
<td></td><td></td><td></td>
<td></td><td></td><td></td>
</tr>
<tr>
<td class='player'></td><td class='pool' onclick='getPool(3);'></td>
<td></td><td></td><td></td>
<td></td><td></td><td></td>
</tr>
<tr>
<td class='player'></td><td class='pool' onclick='getPool(4);'></td>
<td></td><td></td><td></td>
<td></td><td></td><td></td>
</tr>
</table>
<hr><br>
<button onclick='newGame();'>New Game</button>
<button onclick='loadPool();'>Load Pool</button>
<br><br><hr>
</center>
</body>

<script>

for (i=1;i<5;i++)
for (j=0;j<8;j++)
store.rows[i].cells[j].textContent='-';

function newGame() {
var i,j;
for (i=1;i<5;i++)
for (j=0;j<8;j++)
store.rows[i].cells[j].textContent='-';
playerDice=new Array();
plNames=['one','two','thr','fou'];
for (i=0;i<4;i++) {
playerDice[i]=new Array(throwDice(),throwDice());
store.rows[i+1].cells[2].textContent=playerDice[i][0];
store.rows[i+1].cells[3].textContent=playerDice[i][1];
}
pool=new Array('-','-','-','-');
pok=[1,1,1,1];
displayPool();
pl=0;pc=0; //player; pool count
displayPlayer();
}

function throwDice() {
return Math.floor(Math.random()*6)+1;
}

function displayPlayer() {
var i;
for (i=0;i<4;i++) store.rows[i+1].cells[0].textContent=plNames[i]+(i==pl?'*':'');
}

function loadPool() {
var i;
pok=[1,1,1,1];
if (pc==4) return;
ps=4; // pool store
cp=pl; // current player
for (i=0;i<4;i++) pool[i]=throwDice();
displayPool();
pc++;
}

function displayPool() {
var i;
for (i=0;i<4;i++) store.rows[i+1].cells[1].textContent=(pok[i]==1)?pool[i]:'-';
}

function getPool(n) {
if (pok[n-1]==0) return;
pok[n-1]=0;
playerDice[cp].push(store.rows[n].cells[1].textContent*1);
store.rows[cp+1].cells[3+pc].textContent=playerDice[cp][playerDice.length-1];
cp++;
if (cp==4) cp=0;
displayPool();
if (pok==[0,0,0,0]) {pl++;displayPlayer();}
}


</script>

</html>